<template>
    <view class="uc-wrap uc-user-manage">
        <view class="panel">
            <view class="txt">名片夹</view>
            <view class="btn">完成</view>
        </view>
        <view class="list">
            <view v-for="(item,index) in list" :key="index" class="choose-item">
                <view class="btn-choose" @click="btnChoose(index)">
                    <image src="@/static/images/checkbox-on.png" mode="widthFix" class="uc-icon44" v-if="item.checked"></image>
                    <image src="@/static/images/checkbox.png" mode="widthFix" class="uc-icon44" v-else></image>
                </view>
                <view class="g-cardItem">
                    <view class="part">
                        <view class="top">
                            <view class="name">
                                <text class="uc-big">郑玲子</text>
                                <text class="uc-tag black-plain">置顶</text>
                            </view>
                            <view class="txt">销售总监</view>
                        </view>
                        <view class="bottom">
                            <view class="txt2">15808707454</view>
                            <view class="txt2">843772554@qq.com</view>
                        </view>
                        <view class="face">
                            <image src="https://my.bziyun.com/20250619/face_1750325367141.png" mode="aspectFill"></image>
                        </view>
                    </view>
                    <view class="btm">
                        <view class="btn">
                            <image src="@/static/images/icon-call.png" mode="widthFix" class="uc-icon36"></image>拨打电话
                        </view>
                        <view class="line"></view>
                        <view class="btn">
                            <image src="@/static/images/icon-share.png" mode="widthFix" class="uc-icon36"></image>分享名片
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="fixed-operate">
            <button class="uc-btn uc-red" hover-class="none">
                <image src="@/static/images/icon-delete.png" mode="widthFix" class="uc-icon48"></image>删除名片
            </button>
        </view>
    </view>
</template>
<script setup>
    import { ref } from 'vue'
    const name = ref('小')
    const list = ref([
        { name: '选项1', checked: true },
        { name: '选项2', checked: false },
        ])
    const btnChoose = (val) => {
        list.value.forEach((item, index) => {
            if (index == val) {
                item.checked = !item.checked
            }
        })
    }
</script>